<template>
    <view :style="{ height: mescrollHeight }">
        <edu-mescroll-uni
            :top="globNavbarHeight + globStatusBarHeight + 'px'"
            @init="mescrollInit"
            @down="refresh"
            @up="getCourse"
        >
            <view class="content">
                <view class="item" v-for="(i, index) in courseList" :key="index">
                    <course-image
                        width="307"
                        height="172"
                        :image="i.cover_url"
                        :courseType="i.course_type"
                        :courseTypeText="i.course_type_text"
                    ></course-image>
                    <view class="item_right">
                        <view class="head_text u-line-2">{{ i.title }}</view>
                        <view class="bottom_item">累计收益：{{ i.sum | formatCurrency }}</view>
                    </view>
                </view>
            </view>
        </edu-mescroll-uni>
    </view>
</template>

<script>
import courseImage from '@/components/common/courseImage.vue'
import { mapGetters } from 'vuex'
export default {
    components: {
        courseImage,
    },
    data() {
        return {
            courseList: [],
        }
    },
    computed: {
        ...mapGetters({
            globNavbarHeight: 'projectSetting/globNavbarHeight',
            globStatusBarHeight: 'projectSetting/globStatusBarHeight',
        }),
        globWindowHeight() {
            return this.$u.sys().windowHeight
        },
        mescrollHeight() {
            let height = this.globWindowHeight - this.globNavbarHeight - this.globStatusBarHeight
            return `${height}px`
        },
    },
    methods: {
        // 下拉刷新
        refresh() {
            this.mescroll.resetUpScroll()
        },
        getCourse(page) {
            this.$edu.api
                .getUserIncomeCourse({
                    page: page.num,
                    count: page.size,
                })
                .then((res) => {
                    const { data } = res
                    let list = data.data
                    let total = data.total

                    if (page.num == 1) this.courseList = []
                    this.courseList = this.courseList.concat(list)
                    this.mescroll.endBySize(list.length, total)
                })
        },
    },
}
</script>

<style lang="scss" scoped>
.content {
    padding-left: 30rpx;
    padding-right: 30rpx;
    overflow: hidden;

    .item {
        height: 172rpx;
        width: 100%;
        margin-top: 32rpx;
        display: flex;

        .item_right {
            height: 100%;
            width: 50%;
            margin-left: 23rpx;

            .head_text {
                height: 80rpx;
                line-height: 40rpx;
                font-size: 30rpx;
                color: #303133;
                font-weight: bold;
            }

            .bottom_item {
                height: 42rpx;
                width: 100%;
                line-height: 42rpx;
                font-size: 30rpx;
                color: #f54030;
                font-weight: bold;
                margin-top: 40rpx;
            }
        }
    }
}
</style>
